<template>
  <div class="container">
      <div v-if="view === 'calendar'" class="calendar-container">
      <el-calendar>
      <!-- 自定义日期单元格的内容 -->
      <template slot="dateCell" slot-scope="{ date, data }">
          <!-- 显示日期（去掉年份部分） -->
          <div :class="['date', isCurrentMonth(date) ? '' : 'past-date']">
            {{ date.getDate() }}
          </div>
          
          <!-- 遍历与当前日期匹配的预约条目 -->
          <div 
              v-for="item in getItemsForDay(data.day)" 
              :key="item.id" 
              style="margin-bottom: 20px"
          >
          <!-- 使用 el-tooltip 显示悬浮卡片 -->
          <el-tooltip 
              class="item" 
              placement="left"
          >
              <template #content>
              <div class="tooltip-content">
                  <div><strong>公司：</strong>{{ item.company }}</div>
                  <div><strong>岗位：</strong>{{ item.jobTitle }}</div>
                  <div><strong>网址：</strong>{{ item.website }}</div>
                  <div><strong>开始时间：</strong>{{ item.startTime }}</div>
                  <div><strong>意向度：</strong>{{ item.intent }}</div>
              </div>
              </template>
              <!-- 显示笔试或面试标签，包括公司名称和开始时间 -->
              <el-card class="tag-card" :body-style="{ padding: '2px' }">
                  <div :class="['tag', item.type === '笔试' ? 'tag-exam' : 'tag-interview']">
                      <!-- {{ item.type === '笔试' ? '笔试' : '面试' }}——{{ item.company }}，{{ item.startTime }} -->
                      {{ item.type === '笔试' ? '笔' : '面' }}:{{ item.company }}
                  </div>
              </el-card>
          </el-tooltip>
          </div>
      </template>
      </el-calendar>
  </div>
  <div v-if="view === 'table'" class="table-container">
    <el-table :data="reserveList" style="width: 100%">
      <el-table-column prop="type" label="类型" width="100"></el-table-column>
      <el-table-column prop="start" label="日期" width="150"></el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="120"></el-table-column>
      <el-table-column prop="company" label="公司" width="150"></el-table-column>
      <el-table-column prop="intent" label="意向度" width="100"></el-table-column>
      <el-table-column prop="website" label="官网链接" width="200">
        <template slot-scope="scope">
          <el-link :href="formatUrl(scope.row.website)" target="_blank">{{ scope.row.website }}</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="buttons">
      <el-button @click="view = 'calendar'" type="primary">显示日历</el-button>
      <el-button @click="view = 'table'" type="primary">显示表格</el-button>
      </div>
  </div>
</template>


<script>
export default {
name: "CalendarTableSwitcher",
data() {
    return {
      view: 'calendar', // 当前视图
      reserveList: [
          {
          id: 1,
          type: '笔试',
          start: '2024-06-17',
          startTime: '10:00',
          company: '公司A',
          intent: '高',
          website:'笔试链接'
          },
          {
          id: 1,
          type: '笔试',
          start: '2024-06-17',
          startTime: '14:00',
          company: '公司A',
          intent: '高',
          website:'笔试链接'
          },
          {
          id: 1,
          type: '笔试',
          start: '2024-06-21',
          startTime: '10:00',
          company: '公司A',
          intent: '高',
          website:'笔试链接'
          },
          {
          id: 2,
          type: '面试',
          start: '2024-06-16',
          startTime: '14:00',
          company: '公司B',
          intent: '中',
          website: '面试链接'
          },
          // 更多数据...
      ]
    }
},
created() {
    this.load() // 在组件创建时加载数据
},
methods: {
    // 异步加载预约数据
    async load() {
    try {
        const res = await this.$request.get('/info/calendar');
        this.reserveList = res.data || [];
    } catch (error) {
        console.error("Error loading reserve data:", error);
    }
    },
    // 获取与指定日期匹配的预约条目
    isCurrentMonth(date) {
      const currentMonth = new Date().getMonth();
      return date.getMonth() === currentMonth;
    },
    getItemsForDay(day) {
      return this.reserveList.filter(item => item.start === day);
    },
    formatUrl(url) {
    if (!/^https?:\/\//i.test(url)) {
      return 'http://' + url;
    }
    return url;
    }
}
}
</script>


<style scoped>
.container {
/* max-width: 800px; */
margin: auto;
background-color: #f9f9f9;
padding: 5px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.buttons {
text-align: right;
margin-top: 10px;
}

.buttons .el-button {
font-size: 20px; /* 设置按钮字体大小 */
padding: 4px 8px; /* 设置按钮内边距 */
min-width: 40px; /* 设置按钮最小宽度 */
margin: 0 2px; /* 设置按钮之间的最小间距 */
color:#333; /* 更改为深色字体 */ 
background-color: #ddd; /* 灰色背景 */  
  border: 1px solid #ddd; /* 灰色边框，如果需要的话 */
}

.calendar-container,
.table-container {
margin-top: 5px;
}

::v-deep .el-calendar {
background-color: #fff;
border-radius: 10px;
}

::v-deep .el-calendar-day {
height: auto;  /* 必须设置自动高度 */
/* min-height: 85px; */
 /* 设置最小高度 */
 background-color: #f9f9f9; /* 改为浅灰色 */  
 border: 1px solid #ddd; /* 灰色边框 */ 
border-radius: 5px;
transition: background-color 0.3s;
}

::v-deep .el-calendar-day:hover {
background-color: #fffacd;
}

.date {
font-size: 14px;
font-weight: bold;
  color: #333; /* 更改为深色字体 */ 
}

.past-date {
opacity: 0.2;
}

.tag-card {
margin-bottom: 5px; /* 设置底部外边距为10px，使多个tag-card元素之间有空间 */
/* border: 1px solid #ffd700; */ /* 注释掉的代码，如果启用会给元素添加一个金色边框 */
border-radius: 10px; /* 设置圆角半径为10px，使元素的角变得圆滑 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 设置元素的阴影，创建轻微的浮动效果 */
transition: box-shadow 0.3s; /* 设置box-shadow属性的过渡效果，持续时间为0.3秒 */
}

.tag-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 当鼠标悬停在元素上时，阴影变得更大和更明显 */
}

.tag {
padding: 6px 12%; /* 设置元素的内边距，垂直方向为6px，水平方向为父元素宽度的12% */
border-radius: 5px; /* 设置圆角半径为5px，使元素的角变得圆滑 */
font-size: 12px; /* 设置字体大小为10px */
color: white; /* 设置字体颜色为白色 */
display: inline-block; /* 设置元素为inline-block，使其既有块级元素的特性又有内联元素的特性 */
}

.tag-exam {
background-color: #ffa07a;
}

.tag-interview {
background-color: #8fbc8f;
}

.tooltip-content {
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>